<template>
    <el-container>
        <el-aside width="20%">
            <el-container>
                <el-header>
                    <div class="right-panel">
                        <div class="right-panel-search">
                            <el-input v-model="search.title_keywords" placeholder="请输入设备关键词" clearable @change="upsearch"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="nopadding">
                    <scTable ref="table" :apiObj="apiObj" highlight-current-row @row-click="selectionChange" stripe remoteSort remoteFilter border>
                        <el-table-column label="设备部门" prop="dept_name" align="center"></el-table-column>
                        <el-table-column label="设备编码" prop="code" align="center"></el-table-column>
                        <el-table-column label="设备名称" prop="title" align="center"></el-table-column>
                    </scTable>
                </el-main>
            </el-container>
        </el-aside>
        <el-container>
            <el-header>
                <div class="right-panel">
                    <div class="right-panel-search">
                        <el-date-picker v-model="search.fdatetime" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 230px" />
                        <el-button type="primary" icon="el-icon-search" @click="getStatus"></el-button>
                        <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
                    </div>
                </div>
            </el-header>
            <el-header>
                <div class="operate">
                    <div class="total" v-for="(item, index) in operate" :key="index" :class="item.state_id == state_id ? 'background' : ''">
                        <!--  @click="filterBtn(item,index)" -->
                        <sc-status-indicator :type="item.src"></sc-status-indicator>
                        <span class="font">{{ item.state }}{{ item.total }}</span>
                    </div>
                </div>
            </el-header>
            <el-main class="nopadding">
                <!-- <scEcharts :option="option"></scEcharts> -->
                <div id="main" style="height:600px;weight:500px"></div>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import scEcharts from "@/components/scEcharts";
import * as echarts from 'echarts';
export default {
    components: { scEcharts },
    name: 'selectFilter',
    data() {
        return {
            dialog: {
                show: false
            },
            apiObj: this.$API.jiankong.correspond.list,
            search: {
                fdatetime: [],
                code: null,
            },
            option: {
            },
            operate: [
                { state: '运行', src: 'success' },
                { state: '准备', src: 'primary' },
                { state: '空闲', src: 'warning' },
                { state: '报警', src: 'danger' },
                { state: '维修', src: 'warning' },
                { state: '关机', src: 'info' },
            ],
            selection: [],
        };
    },
    mounted() {
        this.getMonth()
    },
    methods: {
        getStart() {
            const today = new Date();
            return this.getFormattedDate(new Date(today.getFullYear(), today.getMonth(), 1));
        },
        getEnd() {
            const today = new Date();
            const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
            return this.getFormattedDate(lastDay);
        },
        getMonth() {
            var today = new Date();
            var firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
            var lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
            lastDayOfMonth.setDate(lastDayOfMonth.getDate() - 1);
            var formattedFirstDay = formatDate(firstDayOfMonth);
            var formattedLastDay = formatDate(lastDayOfMonth);
            function formatDate(date) {
                var year = date.getFullYear();
                var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从 0 开始，需要加 1
                var day = date.getDate().toString().padStart(2, '0');
                return year + '-' + month + '-' + day;
            }
            this.search.fdatetime[0] = formattedFirstDay
            this.search.fdatetime[1] = formattedLastDay
        },
        getFormattedDate(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        table_set(row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('edit').setData(row)
            })
        },
        upsearch() {
            this.$refs.table.upData(this.search)
        },
        refresh() {
            for (const key in this.search) {
                this.search[key] = null;
            }
            this.$refs.table.upData(this.search)
        },
        async getStatus() {
            let query = {
                fdatetime: this.search.fdatetime,
                code: this.search.code,
            }
            var _rawData;
            var res = await this.$API.jiankong.correspond.status.post(query);
            _rawData = res.data;
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;
            var HEIGHT_RATIO = 0.6;
            var DIM_CATEGORY_INDEX = 0;
            var DIM_TIME_ARRIVAL = 1;
            var DIM_TIME_DEPARTURE = 2;
            var LABEL_COLOR_INDEX = 6;
            var DATA_ZOOM_AUTO_MOVE_THROTTLE = 30;
            var DATA_ZOOM_X_INSIDE_INDEX = 1;
            var DATA_ZOOM_Y_INSIDE_INDEX = 3;
            var DATA_ZOOM_AUTO_MOVE_SPEED = 0.2;
            var DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH = 30;
            var _draggable;
            var _draggingEl;
            var _dropShadow;
            var _draggingCursorOffset = [0, 0];
            var _draggingTimeLength;
            var _draggingRecord;
            var _dropRecord;
            var _cartesianXBounds = [];
            var _cartesianYBounds = [];
            var _autoDataZoomAnimator;

            // $.get(ROOT_PATH + '/data/asset/data/airport-schedule.json', function (rawData) {
            // _rawData = rawData;
            // myChart.setOption((option = makeOption()));
            //     initDrag();
            // });

            myChart.setOption((option = makeOption()));
            initDrag();
            function makeOption() {
                return {
                    tooltip: {},
                    animation: false,
                    toolbox: {
                        left: 20,
                        top: 0,
                        itemSize: 20,
                        feature: {
                            myDrag: {
                                show: true,
                                title: 'Make bars\ndraggable',
                                icon: 'path://M990.55 380.08 q11.69 0 19.88 8.19 q7.02 7.01 7.02 18.71 l0 480.65 q-1.17 43.27 -29.83 71.93 q-28.65 28.65 -71.92 29.82 l-813.96 0 q-43.27 -1.17 -72.5 -30.41 q-28.07 -28.07 -29.24 -71.34 l0 -785.89 q1.17 -43.27 29.24 -72.5 q29.23 -29.24 72.5 -29.24 l522.76 0 q11.7 0 18.71 7.02 q8.19 8.18 8.19 18.71 q0 11.69 -7.6 19.29 q-7.6 7.61 -19.3 7.61 l-518.08 0 q-22.22 1.17 -37.42 16.37 q-15.2 15.2 -15.2 37.42 l0 775.37 q0 23.39 15.2 38.59 q15.2 15.2 37.42 15.2 l804.6 0 q22.22 0 37.43 -15.2 q15.2 -15.2 16.37 -38.59 l0 -474.81 q0 -11.7 7.02 -18.71 q8.18 -8.19 18.71 -8.19 l0 0 ZM493.52 723.91 l-170.74 -170.75 l509.89 -509.89 q23.39 -23.39 56.13 -21.05 q32.75 1.17 59.65 26.9 l47.94 47.95 q25.73 26.89 27.49 59.64 q1.75 32.75 -21.64 57.3 l-508.72 509.9 l0 0 ZM870.09 80.69 l-56.13 56.14 l94.72 95.9 l56.14 -57.31 q8.19 -9.35 8.19 -21.05 q-1.17 -12.86 -10.53 -22.22 l-47.95 -49.12 q-10.52 -9.35 -23.39 -9.35 q-11.69 -1.17 -21.05 7.01 l0 0 ZM867.75 272.49 l-93.56 -95.9 l-380.08 380.08 l94.73 94.73 l378.91 -378.91 l0 0 ZM322.78 553.16 l38.59 39.77 l-33.92 125.13 l125.14 -33.92 l38.59 38.6 l-191.79 52.62 q-5.85 1.17 -12.28 0 q-6.44 -1.17 -11.11 -5.84 q-4.68 -4.68 -5.85 -11.7 q-2.34 -5.85 0 -11.69 l52.63 -192.97 l0 0 Z',
                                onclick: onDragSwitchClick
                            }
                        }
                    },
                    title: {
                        text: 'Gantt of Airport Flight',
                        left: 'center'
                    },
                    dataZoom: [
                        {
                            type: 'slider',
                            xAxisIndex: 0,
                            filterMode: 'weakFilter',
                            height: 20,
                            bottom: 0,
                            start: 0,
                            end: 26,
                            handleIcon:
                                'path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            showDetail: false
                        },
                        {
                            type: 'inside',
                            id: 'insideX',
                            xAxisIndex: 0,
                            filterMode: 'weakFilter',
                            start: 0,
                            end: 26,
                            zoomOnMouseWheel: false,
                            moveOnMouseMove: true
                        },
                        {
                            type: 'slider',
                            yAxisIndex: 0,
                            zoomLock: true,
                            width: 10,
                            right: 10,
                            top: 70,
                            bottom: 20,
                            start: 95,
                            end: 100,
                            handleSize: 0,
                            showDetail: false
                        },
                        {
                            type: 'inside',
                            id: 'insideY',
                            yAxisIndex: 0,
                            start: 95,
                            end: 100,
                            zoomOnMouseWheel: false,
                            moveOnMouseMove: true,
                            moveOnMouseWheel: true
                        }
                    ],
                    grid: {
                        show: true,
                        top: 70,
                        bottom: 20,
                        left: 100,
                        right: 20,
                        backgroundColor: '#fff',
                        borderWidth: 0
                    },
                    xAxis: {
                        type: 'time',
                        position: 'top',
                        splitLine: {
                            lineStyle: {
                                color: ['#E9EDFF']
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#929ABA'
                            }
                        },
                        axisLabel: {
                            color: '#929ABA',
                            inside: false,
                            align: 'center'
                        }
                    },
                    yAxis: {
                        axisTick: { show: false },
                        splitLine: { show: false },
                        axisLine: { show: false },
                        axisLabel: { show: false },
                        min: 0,
                        max: _rawData.parkingApron.parkingApron.data.length
                        // max: 10
                    },
                    series: [
                        {
                            id: 'flightData',
                            type: 'custom',
                            renderItem: renderGanttItem,
                            dimensions: _rawData.parkingApron.flight.dimensions,
                            encode: {
                                x: [DIM_TIME_ARRIVAL, DIM_TIME_DEPARTURE],
                                y: DIM_CATEGORY_INDEX,
                                tooltip: [DIM_TIME_ARRIVAL, DIM_TIME_DEPARTURE]
                            },
                            data: _rawData.parkingApron.flight.data
                        },
                        {
                            type: 'custom',
                            renderItem: renderAxisLabelItem,
                            dimensions: _rawData.parkingApron.parkingApron.dimensions,
                            encode: {
                                x: -1,
                                y: 0
                            },
                            data: _rawData.parkingApron.parkingApron.data.map(function (item, index) {
                                return [index].concat(item);
                            })
                        }
                    ]
                };
            }
            function renderGanttItem(params, api) {
                var categoryIndex = api.value(DIM_CATEGORY_INDEX);
                var labelColor = api.value(LABEL_COLOR_INDEX);
                var timeArrival = api.coord([api.value(DIM_TIME_ARRIVAL), categoryIndex]);
                var timeDeparture = api.coord([api.value(DIM_TIME_DEPARTURE), categoryIndex]);
                var coordSys = params.coordSys;
                _cartesianXBounds[0] = coordSys.x;
                _cartesianXBounds[1] = coordSys.x + coordSys.width;
                _cartesianYBounds[0] = coordSys.y;
                _cartesianYBounds[1] = coordSys.y + coordSys.height;
                var barLength = timeDeparture[0] - timeArrival[0];
                // Get the heigth corresponds to length 1 on y axis.
                var barHeight = api.size([0, 1])[1] * HEIGHT_RATIO;
                var x = timeArrival[0];
                var y = timeArrival[1] - barHeight;
                var flightNumber = api.value(3) + '';
                var flightNumberWidth = echarts.format.getTextRect(flightNumber).width;
                var text =
                    barLength > flightNumberWidth + 40 && x + barLength >= 180
                        ? flightNumber
                        : '';
                var rectNormal = clipRectByRect(params, {
                    x: x,
                    y: y,
                    width: barLength,
                    height: barHeight
                });
                var rectVIP = clipRectByRect(params, {
                    x: x,
                    y: y,
                    width: barLength / 2,
                    height: barHeight
                });
                var rectText = clipRectByRect(params, {
                    x: x,
                    y: y,
                    width: barLength,
                    height: barHeight
                });
                var fillColor = '';
                switch (labelColor) {
                    case 0:
                        fillColor = '#67c23a';
                        break;
                    case 1:
                        fillColor = '#409EFF';
                        break;
                    case 2:
                        fillColor = '#e6a23c';
                        break;
                    case 3:
                        fillColor = '#f56c6c';
                        break;
                    case 4:
                        fillColor = '#e6a23c';
                        break;
                    case 5:
                        fillColor = '#909399';
                        break;

                    default:
                        break;
                }
                return {
                    type: 'group',
                    children: [
                        {
                            type: 'rect',
                            ignore: !rectNormal,
                            shape: rectNormal,
                            style: api.style()
                        },
                        {
                            type: 'rect',
                            ignore: !rectVIP && !api.value(4),
                            shape: rectVIP,
                            // style: api.style({ fill: '#ddb30b' })
                            style: api.style({ fill: fillColor })
                        },
                        {
                            type: 'rect',
                            ignore: !rectText,
                            shape: rectText,
                            style: api.style({
                                // fill: 'transparent',
                                fill: fillColor,
                                stroke: 'transparent',
                                text: text,
                                textFill: '#fff'
                            })
                        }
                    ]
                };
            }
            function renderAxisLabelItem(params, api) {
                var y = api.coord([0, api.value(0)])[1];
                if (y < params.coordSys.y + 5) {
                    return;
                }
                return {
                    type: 'group',
                    position: [10, y],
                    children: [
                        // {
                        //     type: 'path',
                        //     shape: {
                        //     d: 'M0,0 L0,-20 L30,-20 C42,-20 38,-1 50,-1 L70,-1 L70,0 Z',
                        //     x: 0,
                        //     y: -20,
                        //     width: 90,
                        //     height: 20,
                        //     layout: 'cover'
                        //     },
                        //     style: {
                        //     fill: '#368c6c'
                        //     }
                        // },
                        // {
                        //     type: 'text',
                        //     style: {
                        //     x: 24,
                        //     y: -3,
                        //     text: api.value(1),
                        //     textVerticalAlign: 'bottom',
                        //     textAlign: 'center',
                        //     textFill: '#fff'
                        //     }
                        // },
                        {
                            type: 'text',
                            style: {
                                x: 75,
                                y: -2,
                                textVerticalAlign: 'bottom',
                                textAlign: 'center',
                                text: api.value(2),
                                textFill: '#000'
                            }
                        }
                    ]
                };
            }
            function clipRectByRect(params, rect) {
                return echarts.graphic.clipRectByRect(rect, {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                });
            }
            function onDragSwitchClick(model, api, type) {
                _draggable = !_draggable;
                myChart.setOption({
                    dataZoom: [
                        {
                            id: 'insideX',
                            disabled: _draggable
                        },
                        {
                            id: 'insideY',
                            disabled: _draggable
                        }
                    ]
                });
                this.model.setIconStatus(type, _draggable ? 'emphasis' : 'normal');
            }
            function initDrag() {
                _autoDataZoomAnimator = makeAnimator(dispatchDataZoom);
                myChart.on('mousedown', function (param) {
                    if (!_draggable || !param || param.seriesIndex == null) {
                        return;
                    }

                    // Drag start
                    _draggingRecord = {
                        dataIndex: param.dataIndex,
                        categoryIndex: param.value[DIM_CATEGORY_INDEX],
                        timeArrival: param.value[DIM_TIME_ARRIVAL],
                        timeDeparture: param.value[DIM_TIME_DEPARTURE]
                    };
                    var style = {
                        lineWidth: 2,
                        fill: 'rgba(255,0,0,0.1)',
                        stroke: 'rgba(255,0,0,0.8)',
                        lineDash: [6, 3]
                    };
                    _draggingEl = addOrUpdateBar(_draggingEl, _draggingRecord, style, 100);
                    _draggingCursorOffset = [
                        _draggingEl.position[0] - param.event.offsetX,
                        _draggingEl.position[1] - param.event.offsetY
                    ];
                    _draggingTimeLength =
                        _draggingRecord.timeDeparture - _draggingRecord.timeArrival;
                });
                myChart.getZr().on('mousemove', function (event) {
                    if (!_draggingEl) {
                        return;
                    }
                    var cursorX = event.offsetX;
                    var cursorY = event.offsetY;
                    // Move _draggingEl.
                    _draggingEl.attr('position', [
                        _draggingCursorOffset[0] + cursorX,
                        _draggingCursorOffset[1] + cursorY
                    ]);
                    prepareDrop();
                    autoDataZoomWhenDraggingOutside(cursorX, cursorY);
                });
                myChart.getZr().on('mouseup', function () {
                    // Drop
                    if (_draggingEl && _dropRecord) {
                        updateRawData() &&
                            myChart.setOption({
                                series: {
                                    id: 'flightData',
                                    data: _rawData.flight.data
                                }
                            });
                    }
                    dragRelease();
                });
                myChart.getZr().on('globalout', dragRelease);
                function dragRelease() {
                    _autoDataZoomAnimator.stop();
                    if (_draggingEl) {
                        myChart.getZr().remove(_draggingEl);
                        _draggingEl = null;
                    }
                    if (_dropShadow) {
                        myChart.getZr().remove(_dropShadow);
                        _dropShadow = null;
                    }
                    _dropRecord = _draggingRecord = null;
                }
                function addOrUpdateBar(el, itemData, style, z) {
                    var pointArrival = myChart.convertToPixel('grid', [
                        itemData.timeArrival,
                        itemData.categoryIndex
                    ]);
                    var pointDeparture = myChart.convertToPixel('grid', [
                        itemData.timeDeparture,
                        itemData.categoryIndex
                    ]);
                    var barLength = pointDeparture[0] - pointArrival[0];
                    var barHeight =
                        Math.abs(
                            myChart.convertToPixel('grid', [0, 0])[1] -
                            myChart.convertToPixel('grid', [0, 1])[1]
                        ) * HEIGHT_RATIO;
                    if (!el) {
                        el = new echarts.graphic.Rect({
                            shape: { x: 0, y: 0, width: 0, height: 0 },
                            style: style,
                            z: z
                        });
                        myChart.getZr().add(el);
                    }
                    el.attr({
                        shape: { x: 0, y: 0, width: barLength, height: barHeight },
                        position: [pointArrival[0], pointArrival[1] - barHeight]
                    });
                    return el;
                }
                function prepareDrop() {
                    // Check droppable place.
                    var xPixel = _draggingEl.shape.x + _draggingEl.position[0];
                    var yPixel = _draggingEl.shape.y + _draggingEl.position[1];
                    var cursorData = myChart.convertFromPixel('grid', [xPixel, yPixel]);
                    if (cursorData) {
                        // Make drop shadow and _dropRecord
                        _dropRecord = {
                            categoryIndex: Math.floor(cursorData[1]),
                            timeArrival: cursorData[0],
                            timeDeparture: cursorData[0] + _draggingTimeLength
                        };
                        var style = { fill: 'rgba(0,0,0,0.4)' };
                        _dropShadow = addOrUpdateBar(_dropShadow, _dropRecord, style, 99);
                    }
                }
                // This is some business logic, don't care about it.
                function updateRawData() {
                    var flightData = _rawData.flight.data;
                    var movingItem = flightData[_draggingRecord.dataIndex];
                    // Check conflict
                    for (var i = 0; i < flightData.length; i++) {
                        var dataItem = flightData[i];
                        if (
                            dataItem !== movingItem &&
                            _dropRecord.categoryIndex === dataItem[DIM_CATEGORY_INDEX] &&
                            _dropRecord.timeArrival < dataItem[DIM_TIME_DEPARTURE] &&
                            _dropRecord.timeDeparture > dataItem[DIM_TIME_ARRIVAL]
                        ) {
                            alert('Conflict! Find a free space to settle the bar!');
                            return;
                        }
                    }
                    // No conflict.
                    movingItem[DIM_CATEGORY_INDEX] = _dropRecord.categoryIndex;
                    movingItem[DIM_TIME_ARRIVAL] = _dropRecord.timeArrival;
                    movingItem[DIM_TIME_DEPARTURE] = _dropRecord.timeDeparture;
                    return true;
                }
                function autoDataZoomWhenDraggingOutside(cursorX, cursorY) {
                    // When cursor is outside the cartesian and being dragging,
                    // auto move the dataZooms.
                    var cursorDistX = getCursorCartesianDist(cursorX, _cartesianXBounds);
                    var cursorDistY = getCursorCartesianDist(cursorY, _cartesianYBounds);
                    if (cursorDistX !== 0 || cursorDistY !== 0) {
                        _autoDataZoomAnimator.start({
                            cursorDistX: cursorDistX,
                            cursorDistY: cursorDistY
                        });
                    } else {
                        _autoDataZoomAnimator.stop();
                    }
                }
                function dispatchDataZoom(params) {
                    var option = myChart.getOption();
                    var optionInsideX = option.dataZoom[DATA_ZOOM_X_INSIDE_INDEX];
                    var optionInsideY = option.dataZoom[DATA_ZOOM_Y_INSIDE_INDEX];
                    var batch = [];
                    prepareBatch(
                        batch,
                        'insideX',
                        optionInsideX.start,
                        optionInsideX.end,
                        params.cursorDistX
                    );
                    prepareBatch(
                        batch,
                        'insideY',
                        optionInsideY.start,
                        optionInsideY.end,
                        -params.cursorDistY
                    );
                    batch.length &&
                        myChart.dispatchAction({
                            type: 'dataZoom',
                            batch: batch
                        });
                    function prepareBatch(batch, id, start, end, cursorDist) {
                        if (cursorDist === 0) {
                            return;
                        }
                        var sign = cursorDist / Math.abs(cursorDist);
                        var size = end - start;
                        var delta = DATA_ZOOM_AUTO_MOVE_SPEED * sign;
                        start += delta;
                        end += delta;
                        if (end > 100) {
                            end = 100;
                            start = end - size;
                        }
                        if (start < 0) {
                            start = 0;
                            end = start + size;
                        }
                        batch.push({
                            dataZoomId: id,
                            start: start,
                            end: end
                        });
                    }
                }
                function getCursorCartesianDist(cursorXY, bounds) {
                    var dist0 = cursorXY - (bounds[0] + DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH);
                    var dist1 = cursorXY - (bounds[1] - DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH);
                    return dist0 * dist1 <= 0
                        ? 0 // cursor is in cartesian
                        : dist0 < 0
                            ? dist0 // cursor is at left/top of cartesian
                            : dist1; // cursor is at right/bottom of cartesian
                }
                function makeAnimator(callback) {
                    var requestId;
                    var callbackParams;
                    // Use throttle to prevent from calling dispatchAction frequently.
                    callback = echarts.throttle(callback, DATA_ZOOM_AUTO_MOVE_THROTTLE);
                    function onFrame() {
                        callback(callbackParams);
                        requestId = requestAnimationFrame(onFrame);
                    }
                    return {
                        start: function (params) {
                            callbackParams = params;
                            if (requestId == null) {
                                onFrame();
                            }
                        },
                        stop: function () {
                            if (requestId != null) {
                                cancelAnimationFrame(requestId);
                            }
                            requestId = callbackParams = null;
                        }
                    };
                }
            }
            option && myChart.setOption(option);
        },
        selectionChange(selection) {
            this.search.code = selection.code
            this.getStatus()
        },
    },
};
</script>

<style scoped lang="scss">
.operate {
    display: flex;
    align-items: center;

    div {
        display: flex;
        align-items: center;
        border-radius: 30px;
        border: 1px solid #e2e2e2;
        font-size: 14px;
        padding: 9px 17px;
        margin: 0 5px;
        cursor: pointer;

        .font {
            margin-left: 5px;
        }
    }
}
</style>
